import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
    handleClick = () => {
        this.setState((state)=>({count:state.count+1}),()=>{
            console.log('callback1',this.state.count)//2
        });//this.setState(fn)
        console.log(this.state.count)//0
        this.setState((state)=>({count:state.count+1}),()=>{
            console.log('callback2',this.state.count)//2
        });//this.setState(fn})
        console.log(this.state.count)//0
        setTimeout(()=>{//也是批量
            this.setState((state)=>({count:state.count+1}),()=>{
                console.log('callback3',this.state.count)//4
            });//this.setState(fn)
            console.log(this.state.count)//2
            this.setState((state)=>({count:state.count+1}),()=>{
                console.log('callback4',this.state.count)//4
            });//this.setState(fn})
            console.log(this.state.count)//2
        });
    }
    //计算新状态
    //当计算完新状态后才一次执行所有的callback
    render() {
        console.log('render')
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }
}
let element = <Counter />
root.render(element);
/**
 * 1.在React事件处理函数中setState可能是异步，也就是批量的，也就是延迟生效的
 * 2.等事件处理函数handleClick执行完后会进行一次批量更新渲染
 * 
 */